<template>
  <el-descriptions :column="1" border>
    <el-descriptions-item
      v-for="item in options"
      :key="item"
      :label="item.label"
      width="0"
    >
      <el-image
        v-if="item.type == 'image'"
        style="width: 100px; height: 100px"
        :src="'http://127.0.0.1:8090/public/avator/' + dataItem[item.prop]"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div> </template
      ></el-image>

      <div v-else-if="item.prop == 'photos'">
        <el-image
          v-for="i in dataItem[item.prop].split(',')"
          :key="i"
          :src="'http://127.0.0.1:8090/public/homestay/' + i"
          style="width: 100px; height: 100px; margin-right: 10px"
        ></el-image>
      </div>

      <span v-else-if="item.prop === 'position'">
        <el-tag type="danger" v-if="dataItem[item.prop] === 1">管理员 </el-tag>
        <el-tag v-else>用户 </el-tag>
      </span>
      <span v-else-if="item.type === 'more'">
        <el-tag v-if="dataItem[item.prop] === 2" type="info">待审核 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 3" type="success"
          >已上线
        </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 4" type="primary"
          >已下线
        </el-tag>
        <el-tag v-else type="warning">审核失败 </el-tag>
      </span>
      <span v-else-if="item.prop === 'status'">
        <el-tag v-if="dataItem[item.prop] === 1">开启 </el-tag>
        <el-tag v-else type="info">关闭 </el-tag>
      </span>

      <span v-else-if="item.prop === 'rentType'">
        <el-tag type="success" v-if="dataItem[item.prop] === 1"
          >整套出租
        </el-tag>
        <el-tag type="success" v-else-if="dataItem[item.prop] === 2"
          >单间出租
        </el-tag>
        <el-tag v-else>合住房间</el-tag>
      </span>
      <span v-else-if="item.prop === 'homeType'">
        <el-tag v-if="dataItem[item.prop] === 1">别墅 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">公寓 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">住宿加早餐 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">Loft </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">小木屋 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">城堡 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">宿舍 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] === 2">蒙古包 </el-tag>
        <el-tag v-else>帐篷</el-tag>
      </span>

      <span v-else-if="item.type === 'time'">
        <span v-if="!dataItem[item.prop]"></span>
        <span v-else>{{ toTime(dataItem[item.prop]) }}</span></span
      >
      <span v-else-if="item.type === 'date'">{{
        toDate(dataItem[item.prop])
      }}</span>

      <span v-else-if="item.type === 'info'">
        <el-tag v-if="dataItem[item.prop] == 1" type="primary">系统消息</el-tag>
        <el-tag v-else type="success">消息通告</el-tag>
      </span>

      <span v-else-if="item.prop === 'state'">
        <el-tag v-if="dataItem[item.prop] == 1">待确认 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] == 2">待支付 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] == 3">待入住 </el-tag>
        <el-tag v-else-if="dataItem[item.prop] == 4">已完成 </el-tag>
        <el-tag v-else>已退订 </el-tag>
      </span>

      <div style="width: 100%; height: 500px" v-else-if="item.prop === 'map'">
        <div id="container" style="width: 100%; height: 100%"></div>
      </div>

      <span v-else-if="item.prop == 'isRead'">
        <el-tag v-if="dataItem[item.prop] === 1">是</el-tag>
        <el-tag v-else type="info">否</el-tag>
      </span>

      <span v-else>{{ dataItem[item.prop] }}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { toTime, toDate } from "../../util/toTime";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { defineProps, onMounted, ref } from "vue";
import repair_mapicon from "../../assets/zuobiao.png";
const props = defineProps({
  options: Array,
  dataItem: Object,
});
const imgList = ref<any>([]);
const { BMap } = window as any;
onMounted(() => {
  if (props.dataItem.photos) {
    imgList.value = props.dataItem.photos.split(",");
    console.log(imgList.value);
  }
  if (props.dataItem.country) {
    var map = new BMap.Map("container");
    var point = new BMap.Point(props.dataItem.lng, props.dataItem.lat);
    map.centerAndZoom(point, 30);
    map.enableScrollWheelZoom(true);
    const deviceSize = new BMap.Size(40, 40);
    const deviceIcon = new BMap.Icon(repair_mapicon, deviceSize, {
      //会以base64的方式传参icon
      imageSize: deviceSize,
    });
    map.addOverlay(
      new BMap.Marker(point, {
        icon: deviceIcon,
      })
    );
  }
});
</script>

<style scoped></style>
